<template>
	<div class="components-container board">
		<Kanban
				:key="1"
				:list="list1"
				:options="options"
				class="kanban todo"
				header-text="Todo"
		/>
		<Kanban
				:key="2"
				:list="list2"
				:options="options"
				class="kanban working"
				header-text="Working"
		/>
		<Kanban
				:key="3"
				:list="list3"
				:options="options"
				class="kanban done"
				header-text="Done"
		/>
	</div>
</template>
<script>
	import Kanban from '@/components/Kanban';

	export default {
		name: 'DragKanbanDemo',
		components: {
			Kanban,
		},
		data() {
			return {
				options: {
					group: 'mission',
				},
				list1: [
					{name: 'Mission', id: 1},
					{name: 'Mission', id: 2},
					{name: 'Mission', id: 3},
					{name: 'Mission', id: 4},
				],
				list2: [
					{name: 'Mission', id: 5},
					{name: 'Mission', id: 6},
					{name: 'Mission', id: 7},
				],
				list3: [
					{name: 'Mission', id: 8},
					{name: 'Mission', id: 9},
					{name: 'Mission', id: 10},
				],
			};
		},
	};
</script>
<style lang="scss">
	.board {
		width: 1000px;
		margin-left: 20px;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-items: flex-start;
	}

	.kanban {
		&.todo {
			.board-column-header {
				background: #4a9ff9;
			}
		}

		&.working {
			.board-column-header {
				background: #f9944a;
			}
		}

		&.done {
			.board-column-header {
				background: #2ac06d;
			}
		}
	}
</style>

